<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="css/base.css"/>
        <link rel="stylesheet" type="text/css" href="css/rightMenu.css"/>
        <!--引入 element-ui 的样式-->
        <link rel="stylesheet" type="text/css" href="css/element.css">
        <!-- 必须先引入vue  后使用element-ui -->
        <script src="js/vue.js"></script>
        <!-- 引入element 的组件库-->
        <script src="js/element.js"></script>
        <script src="http://47.108.233.67/demo/mqttws31.js" type="text/javascript"></script>
        <!--        <script src="js/webclient.js" type="module"></script>-->
    </head>
    
    <body style="overflow-x: hidden; overflow-y: hidden;margin:0px">
        <div id="app" style="color:white;" class="rightMenu">
            <el-container>
                <!--左侧聊天用户列表-->
                <el-aside width="380px" height="100px" class="leftMenu">
                    <div class="leftMain">
                        <div class="agentUser">
                            <img class="avatar" src="img/1.jpg" width="40px" height="40px" title="客服001"/>
                            <p class="name">客服001</p>
                        </div>
                        <div class="searchDiv">
                            <img class="imgSearch" src="img/search.png"/> <input class="search flex-1" type="text"
                                                                                 placeholder="search user..."/>
                        </div>
                        
                        <div class="userList">
                            <img class="avatar" style="display: block;" src="img/customer.png" width="40px"
                                 height="40px" title="user01"/>
                            <ul class="userInfo">
                                <li><span class="userName">{userName}</span></li>
                                <li><span class="company">Microsoft Corporation<span/></li>
                            </ul>
                            
                            <ul class="otherInfo">
                                <li><span class="time">18:23</span></li>
                                <li><span class="newNum">1<span/></li>
                            </ul>
                        </div>
                    
                    </div>
                </el-aside>
                
                
                <el-container>
                    <!--右侧头部-->
                    <el-header
                            style=" height: 50px; box-sizing: border-box; line-height: 50px;border-bottom: 1px solid #d9d9d9;">
                        <div style="float: left"><span class="headName">user01</span></div>
                        <div style="float: right">
                            <img style="margin-top: 10px;" src="img/add-user.png"/>
                        </div>
                    </el-header>
                    
                    <!--右侧正文-->
                    <el-main class="main" style="padding: 0">
                        <div class="content">
                            <div class="msg">
                                <span v-for="(item,i) in msgList">{item.msg}</span>
                            </div>
                            <!-- 底部-->
                            <div class="bottom">
                                <div class="tool">
                                    <img src="img/smile.png" class="toolImg"/> <img src="img/picture.png"
                                                                                    class="toolImg" width="36px"
                                                                                    height="28px"
                                                                                    style="margin-bottom: 2px;"/>
                                </div>
                                <div class="sendMsg">
                                    <textarea class="writeMsg" v-model="msgData"></textarea>
                                </div>
                                <div class="testBut">
                                    <el-button>测试群发</el-button>
                                    <el-button @click="btnSendMsg">发送</el-button>
                                </div>
                            </div>
                        
                        </div>
                    
                    </el-main>
                
                </el-container>
            </el-container>
        </div>
    </body>
    
    
    <script type="module">
        import {WebClient} from "./js/webclient.js"
        // import Utils from "./js/utils.js"
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    msgData: '',
                    userName: 'user1',
                    getMessage: '',
                    clientList: [],
                    msgList:[]
                };
            },
            watch: {
                getMessage(val){
                    let messageData ={msg:'我是罗钟弦',userName:'user1'}
                    this.msgList.push(messageData)
                }
            },
            mounted() {
                this.connectMQ()
                this.polling()
                this.getMessage = window.getMessage;
                console.log("mounted:" + this.getMessage)
            },
            methods: {
                connectMQ() {
                    let clientObj = new Paho.MQTT.Client('47.108.233.67', 8007, 'user1')
                    let webclient = new WebClient('user1', clientObj, clientObj.path)
                    let clientData = {webclient: webclient, userName: 'agent001'}
                    this.clientList.push(clientData)
                    webclient.connect()
                },
                polling() {
                    setInterval(()=>{
                        this.getMessage = window.getMessage
                         console.log(this.getMessage)
                    }, 500);
                },
                btnSendMsg(){
                    let  newThis = this
                    this.clientList.forEach(
                        function (item) {
                            let webclient = item.webclient
                            console.log(this)
                            webclient.send(new Paho.MQTT.Message(newThis.msgData))
                            let messageData ={msg:'我是罗钟弦',userName:item.userName}
                            newThis.msgList.push(messageData)
                        }
                    )
                },
            }
        })
    
    </script>
    
    <style>
        ul {
            margin: 0;
            padding: 0
        }
        
        li {
            margin: 0;
            padding: 0
        }
        
        .leftMenu {
            overflow-x: hidden;
            overflow-y: scroll;
        }
        
        /*隐藏滚动条*/
        .leftMenu::-webkit-scrollbar {
            display: none;
        }
        
        .rightMenu {
            overflow-x: hidden;
            overflow-y: hidden;
        }
    
    </style>


</html>